<style scoped>
  .head-left{
    position: absolute;
    top: 15px;
    right:10px;
    color: #7f7a8e;
    transform:rotate(90deg)
  }
  .m-signature-pad--footer{
    position: absolute;
    left:0;
    bottom:80px;
    transform:rotate(90deg);

  }
  .m-signature-pad--footer button{
    border:1px solid #cccccc;
    background: #eaeff3;
    padding:4px 10px;
    border-radius: 4px;
    font-size: 14px;
  }
</style>
<style>
  .jSignature{
    width:100%;
    height: 300px !important;
    transform:rotate(270deg);
  }
</style>
<template>
  <div class="sign">
    <div class="head-left" @click="goBack"><h1 class="iconfont icon-xiangzuo1"></h1></div>
    <form id='form_pad' method="post" enctype="multipart/form-data">
      <canvas class="pad" id='pad'></canvas>
    </form>
    <div class="m-signature-pad--footer">
      <button type="button" id='btnRest' class="mui-btn">重写</button>&nbsp;
      <button type="button" id='btnSubmit' class="mui-btn">确定</button>
    </div>
  </div>
</template>

<script>
  import host from '../config.js'
  import axios from 'axios'
  import { Toast } from 'mint-ui'
  import SignaturePad from 'signature_pad';

  export default {
    data () {
      return {
      }
    },
    mounted() {

      let _this = this
      var canvas = document.getElementById("pad");
      var signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgb(255,255,255)',
        onBegin: function() {
          console.log('onbegin')
        },
        onEnd: function() {
          console.log('onEnd')
        }
      });
      document.getElementById("btnRest").addEventListener('click', function() {
        signaturePad.clear();
      })
      document.getElementById("btnSubmit").addEventListener('click', function() {
        var data_uri = signaturePad.toDataURL();
        var base64Data = data_uri.replace(/^data:image\/\w+;base64,/, "");
        axios({
          method: 'post',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + '/api/trade/signBase64',
          data: JSON.stringify({"signImg": base64Data})
        }).then(function(data){
          if(data.data.code === 6006) {
            that.$router.push('/login')
          }
          if(data.data.code === 6007){
            that.$refreshToken()
          }
          if(data.data.code === 200){
            _this.$store.state.sign = 1
            _this.$store.state.signSuccess = data_uri
            _this.$router.push('/open5')
          } else {
            Toast({
              message: data.data.msg,
              duration: 1000
            })
          }
        })
      })

      function resizeCanvas() {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
      }
      window.addEventListener("resize", resizeCanvas);
      resizeCanvas();
    },
    methods: {
      goBack () {
        this.$router.push('./open5')
      }
    }
  }
</script>
